<template>
    <div class="pay-success">
        <!--如果是单独的页面，就没必要展示导航栏(带有登录的用户)-->
        <Header></Header>
        <div class="container">

            <Header2></Header2>
            <div class="main">
                <div class="title">
                    <div class="success-tips">
                        <p class="tips">
                            您已成功购买 {{memberDict.buy_month}} 个月的会员！
                            <span style="color: red; vertical-align: 2px;" v-show="memberDict.is_give">+赠送{{memberDict.give_data}}天</span>
                        </p>
                    </div>
                </div>
                <div class="order-info">
                    <p class="info"><b>订单号：</b><span>{{ result.out_trade_no }}</span></p>
                    <p class="info"><b>交易号：</b><span>{{ result.trade_no }}</span></p>
                    <p class="info"><b>充值金额：</b><span>{{ result.total_amount }}元</span></p>
                    <p class="info"><b>付款时间：</b><span><span>{{ DateFor(result.timestamp) }}</span></span></p>
                </div>
                <div class="study" @click="skipHome">
                    <span>立即看书</span>
                </div>
            </div>

            <!--<Footer></Footer>-->
        </div>
    </div>
</template>

<script>
    import Header from "@/components/Header"
    import Header2 from "@/components/Header2"
    import Footer from "@/components/Footer"

    export default {
        name: "Success",
        data() {
            return {
                result: {},
                orderDetail: {},
                memberDict: {}
            };
        },
        created() {
            // url后拼接的参数：?及后面的所有参数 => ?a=1&b=2
            // console.log(location.search);

            // 解析支付宝回调的url参数
            let params = location.search.substring(1);  // 去除? => a=1&b=2
            let items = params.length ? params.split('&') : [];  // ['a=1', 'b=2']
            //逐个将每一项添加到args对象中
            for (let i = 0; i < items.length; i++) {  // 第一次循环a=1，第二次b=2
                let k_v = items[i].split('=');  // ['a', '1']
                //解码操作，因为查询字符串经过编码的
                if (k_v.length >= 2) {
                    // url编码反解
                    let k = decodeURIComponent(k_v[0]);
                    this.result[k] = decodeURIComponent(k_v[1]);
                    // 没有url编码反解
                    // this.result[k_v[0]] = k_v[1];
                }

            }
            // 解析后的结果
            /*
            charset=utf-8&out_trade_no=5191787adc6f11ea8c8548ba4e4e6384&method=alipay.trade.page.pay.return&total_amount=150.00&sign=GXLVkBX3kqHwJcON88rG6VJnJV%2FO5fSufz5wvJDvbfUS2MGFcxSxpyJIASHmi55MPwU%2FpQfMxJ%2Fi9IyEFMSRgWByw0xV1ulIVk77jxus8P21wzssKrMydSFBj4XE36I3ZQzQPH0LlN%2BfLoFkm4YFBHlZl3FyKlHcWdvraqBqoeYdvZkRAggkThCfLKMkN6yY1LNts4Bsz55k3q2Y1f7bzZERfvjc%2FExn6YU%2BfGVYW6WYP14QA6JlYe%2BSWA8P9RM%2B3ZDfBKDpo9e7jmvlifYlQYl91kQxb%2B%2BZGOXl7aE7yDBDJJMYwSjb52669NhZcLSyk7JTjLX4vuS0BPRMhaoqng%3D%3D&trade_no=2020081222001473490501344663&auth_app_id=2021000117620642&version=1.0&app_id=2021000117620642&sign_type=RSA2&seller_id=2088621955409210&timestamp=2020-08-12%2015%3A42%3A34
            */
            // console.log('this.result:', this.result);

            // 把地址栏上面的支付结果，再get请求转发给后端
            this.$axios({
                url: this.$settings.base_url + '/order/success/' + location.search,
                method: 'get',
            }).then(response => {
                // {id: 4, price: 150, real_price: 150, expire_time: "2020-09-14T15:42:05.675914", is_expire: false}
                // console.log('response.data:', response.data);
                this.orderDetail = response.data.result[0];
                this.memberDict = response.data.member_dict;
            }).catch(() => {
                // console.log('支付结果同步失败');
                this.$message({
                    message: "支付结果同步失败!",
                    type: 'warning',
                });
            })
        },
        components: {
            Header,
            Header2,
            Footer
        },
        methods: {
            skipHome() {
                this.$router.push('/');
            },
            /**
             * @return {string}
             */
            DateFor(time) {
                const WEEKMAP = {
                    0: "星期天",
                    1: "星期一",
                    2: "星期二",
                    3: "星期三",
                    4: "星期四",
                    5: "星期五",
                    6: "星期六"
                };

                let d1 = new Date(time);
                let year = d1.getFullYear();
                let month = d1.getMonth() + 1 < 10 ? "0" + (d1.getMonth() + 1) : d1.getMonth() + 1;  //注意月份是从0~11
                let day = d1.getDate();
                let hour = d1.getHours();
                let minute = d1.getMinutes() < 10 ? "0" + d1.getMinutes() : d1.getMinutes();  //三元运算

                let week = WEEKMAP[d1.getDay()];  //星期是从0~6

                return `${year}-${month}-${day} ${hour}:${minute} ${week}`;
            }
        }
    }
</script>

<style scoped>
    .main {
        padding: 60px 0;
        margin: 0 auto;
        width: 1200px;
        background: #fff;
    }

    .main .title {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding: 25px 40px;
        border-bottom: 1px solid #f2f2f2;
    }

    .main .title .success-tips {
        box-sizing: border-box;
    }

    .title img {
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin-right: 40px;
    }

    .title .success-tips {
        box-sizing: border-box;
    }

    .title .tips {
        font-size: 26px;
        color: #000;
    }


    .info span {
        color: #ec6730;
    }

    .order-info {
        padding: 25px 48px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f2f2f2;
    }

    .order-info p {
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .order-info p b {
        font-weight: 400;
        color: #9d9d9d;
        white-space: nowrap;
    }

    .study {
        padding: 25px 40px;
    }

    .study span {
        display: block;
        width: 140px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        background: #ffc210;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;
    }
</style>